<template>
  <div class="layout-container wh-full flex">
    <aside class="layout-sidebar w-80 flex-col flex-shrink-0 items-center pb-52 pt-20">
      <div class="mb-40 text-0">
        <img class="h-40 w-40" src="@/assets/images/logo.png" />
      </div>
      <SideMenu />
    </aside>
    <article class="my-8 mr-8 flex flex-1 overflow-hidden rounded-12">
      <div id="layout-child-menu" class="menu flex-shrink-0 bg-#ffffffb5 backdrop-blur-50"></div>
      <main class="min-w-0 flex-1 bg-#FFF">
        <slot />
      </main>
    </article>
  </div>
</template>
<script setup lang="jsx">
// import { useMqttStore } from '@/store'
import SideMenu from './SideMenu.vue'
import ToggleTheme from '../components/ToggleTheme.vue'
import Avatar from '../components/Avatar.vue'
defineOptions({
  name: 'Layout',
})
// const mqttStore = useMqttStore()
onBeforeMount(() => {
  // mqttStore.connect(
  //   import.meta.env.VITE_IS_PROXY_MQTT === 'true'
  //     ? import.meta.env.VITE_PROXY_MQTT
  //     : `ws://${window.location.host}:8083`
  // )
})

onUnmounted(() => {
  // mqttStore.disconnect()
})
</script>
<style lang="scss" scoped>
.layout-container {
  background: url(@/assets/images/main-round-bg1.png) right 104px top -60px/390px no-repeat,
    url(@/assets/images/main-round-bg2.png) left 356px top 17px/460px no-repeat,
    linear-gradient(137deg, #e6edf6 0%, #e3ecf8 100%) no-repeat;
  .layout-sidebar {
    background: url(@/assets/images/main-side-bg.png) center/100% no-repeat;
  }
}
</style>
